<template>
<div class="container">
    <div class="top-bt">
        <el-button type="back" icon="el-icon-arrow-left" @click="GoBack">返回</el-button>
        <el-button type="Submit" @click="submit('ruleForm')">提交</el-button>
    </div>
    <div class="body-box">
        <h1>新建亦廉课堂</h1>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <!--输入框-->
            <el-form-item label=" 标题：" prop="title">
                <el-input v-model="ruleForm.title" placeholder="请输入标题" type="text" maxlength="100" show-word-limit></el-input>
            </el-form-item>
            <!--输入框-->
            <el-form-item label="  来源：" prop="source">
                <el-input v-model="ruleForm.source" placeholder="请输入来源" type="text" maxlength="50" show-word-limit></el-input>
            </el-form-item>
            <!--时间选择输入框-->
            <el-form-item label="  发布时间：" prop="publishTime">
                <el-date-picker v-model="ruleForm.publishTime" type="datetime" placeholder="选择日期时间" value-format="yyyy-MM-dd HH:mm:ss" clear-icon>
                </el-date-picker>
            </el-form-item>
            <!-- 富文本编辑器组件 -->
            <!-- <Editor v-model="text"></Editor> -->
            <div class="text-editor-box">
                <h1 class="h1-2">内容：</h1>
                <quill-editor v-model="ruleForm.context" ref="QuillEditor" :options="editorOption" />
                <div class="bt-group">
                    <Before-looking :ruleForm="ruleForm" modular="亦廉课堂查看"></Before-looking>
                </div>
            </div>
        </el-form>
    </div>
    <!--图片上传的弹窗-->
    <el-dialog title="上传图片" :visible.sync="dialogVisible" width="25%">
        <div class="upload-title">请选择你要上传的图片</div>
        <Upload v-if="dialogVisible" :ruleForm.sync="uploadRuleForm"></Upload>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
    </el-dialog>
</div>
</template>

<script>
// import Preview from '@/components/preview/Preview.vue'
import BeforeLooking from "@/components/Looking/BeforeLooking";
import Upload from "@/components/Upload/Upload.vue";
export default {
    components: {
        BeforeLooking,
        Upload
    },
    data() {
        const _this = this;
        const toolbarOptions = [
            ["bold", "italic", "underline", "strike"], // toggled buttons
            ["blockquote", "code-block"],

            [{
                    header: 1,
                },
                {
                    header: 2,
                },
            ], // custom button values
            [{
                    list: "ordered",
                },
                {
                    list: "bullet",
                },
            ],
            [{
                    script: "sub",
                },
                {
                    script: "super",
                },
            ], // superscript/subscript
            [{
                    indent: "-1",
                },
                {
                    indent: "+1",
                },
            ], // outdent/indent
            [{
                direction: "rtl",
            }, ], // text direction

            [{
                size: ["small", false, "large", "huge"],
            }, ], // custom dropdown
            [{
                header: [1, 2, 3, 4, 5, 6, false],
            }, ],

            [{
                    color: [],
                },
                {
                    background: [],
                },
            ], // dropdown with defaults from theme
            [{
                font: [],
            }, ],
            [{
                align: [],
            }, ],
            ["link", "image", "video"],
            ["clean"], // remove formatting button
        ];
        return {
            //富文本
            activeHtmlName: "pc",
            length: null,
            dialogVisible: false,
            uploadRuleForm: {},
            ruleForm: {
                title: "",
                source: "",
                context: "",
                publishTime: "",
            },
            rules: {
                title: [{
                    required: true,
                    message: "请输入标题",
                    trigger: "blur"
                }],
                source: [{
                    required: true,
                    message: "请输入来源",
                    trigger: "blur"
                }],
                publishTime: [{
                    required: true,
                    message: "请选择发布时间",
                    trigger: "change"
                }, ],
            },
            editorOption: {
                modules: {
                    toolbar: {
                        container: toolbarOptions, // 工具栏
                        handlers: {
                            image: function (value) {
                                if (value) {
                                    _this.dialogVisible = true;
                                    let quill = _this.$refs.QuillEditor.quill;
                                    _this.length = quill.getSelection().index;
                                    // alert("自定义图片");
                                } else {
                                    this.quill.format("image", false);
                                }
                            },
                        },
                    },
                },
            },
        };
    },
    computed: {
        //图片获取根路径
        baseUrl() {
            return this.$store.state.PortalManagement.fileIp;
        },
    },
    watch: {
        uploadRuleForm(n) {
            this.handleSuccess(this.baseUrl + n.pic);
        },
    },
    methods: {
        handleSuccess(res) {
            this.dialogVisible = false;
            console.log(res, "res11111");
            // 获取富文本组件实例
            let quill = this.$refs.QuillEditor.quill;
            console.log(quill, "quill");
            console.log(quill.getSelection(), "getSelection");
            // 如果上传成功
            if (res) {
                // 获取光标所在位置
                let length = this.length;
                // 插入图片，res为服务器返回的图片链接地址
                quill.insertEmbed(length, "image", res);
                // 调整光标到最后
                quill.setSelection(length + 1);
                console.log(this.ruleForm.context, "context")
            } else {
                // 提示信息，需引入Message
                Message.error("图片插入失败");
            }
        },
        //   返回
        GoBack() {
            this.$router.go(-1);
            // console.log(this.context, "文本框上传图片");
        },
        // 提交
        submit(formName) {
            this.$refs[formName].validate((valid) => {
                this.Api.getForumClassAdd({
                    title: this.ruleForm.title,
                    source: this.ruleForm.source,
                    context: this.ruleForm.context,
                    publishTime: this.ruleForm.publishTime
                }).then((res) => {
                    // console.log(res, 111);
                    if (res.code === "0") {
                        this.$router.go(-1);
                    }
                });

            })

        },
    },
};
</script>

<style lang="less" scoped>
.container {
    padding: 0;

    .top-bt {
        display: flex;
        justify-content: space-between;
        background: rgba(240, 242, 245, 1);
        padding-bottom: 20px;

        .el-button--back {
            width: 70px;
            height: 36px;
            background: rgba(255, 255, 255, 1);
            border-radius: 4px;
            border: 1px solid rgba(221, 221, 221, 1);
            color: rgba(51, 51, 51, 1);
            padding: 0;
        }

        .el-button--Submit {
            width: 70px;
            height: 36px;
            background: rgba(61, 127, 255, 1);
            border-radius: 4px;
            border: 1px solid rgba(221, 221, 221, 1);
            color: #ffffff;
            padding: 0;
        }
    }

    .body-box {
        >h1 {
            font-size: 20px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: rgba(51, 51, 51, 1);
            line-height: 60px;
            text-align: center;
            border-bottom: 1px solid #e4e7ed;
            margin-bottom: 20px;
        }

        .el-form {
            margin-top: 20px;
            padding-left: 41px;
        }
    }
}

// 富文本编辑器
.text-editor-box {
    display: flex;

    .h1-2 {
        width: 85px;
        height: 22px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #333333;
        text-align: right;
    }

    .h1-2::before {
        content: "* ";
        color: #ff0000;
    }

    /deep/.bt-group {
        display: flex;
        align-items: flex-end;
        position: relative;

        .el-button--preview {
            width: 70px;
            height: 36px;
            background: rgba(255, 255, 255, 1);
            border-radius: 4px;
            border: 1px solid rgba(61, 127, 255, 1);
            color: #3d7fff;
            padding: 0;
            margin-left: 10px;
            position: absolute;
            bottom: -30px;
        }
    }

    .quill-editor {
        /deep/.ql-container {
            min-height: 20vh;

        }
    }
}

/deep/.quill-editor {
    width: 1350px;
    height: 200px !important;

    .ql-blank {
        padding-left: 0px;
    }

    .ql-containe {
        height: 200px !important;
    }
}

//form表单
/deep/.el-form {
    .el-form-item {
        margin: 0 0 16px 0;

        .el-form-item__label {
            width: 85px !important;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #333333;
            padding: 0;
        }

        .el-form-item__content {
            margin-left: 85px !important;

            .el-input__inner {
                width: 460px;
                height: 36px;
                background: rgba(255, 255, 255, 1);
                border-radius: 4px;
                border: 1px solid rgba(221, 221, 221, 1);
                padding-left: 12px;
            }
        }
    }

    .pic-box {
        display: flex;
        padding-bottom: 10px;

        .h1-1 {
            width: 85px;
            height: 22px;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #333333;
            text-align: right;
        }

        .h1-1::before {
            content: "* ";
            color: #ff0000;
        }
    }

    .flex-box {
        display: flex;

        .pic-Tips {
            width: 360px;
            padding-top: 6px;
            padding-bottom: 15px;
            border-top: 1px solid #dddddd;
            margin-left: 82px;

            h1 {
                font-size: 12px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: rgba(153, 153, 153, 1);
                line-height: 22px;
            }
        }
    }
}

/deep/.el-input__prefix {
    display: none;
}

//图片上传的弹窗样式
/deep/.el-dialog__wrapper {
    .el-dialog {
        border-radius: 8px 8px 0px 0px;

        .el-dialog__header {
            padding: 15px 20px 15px 24px;

            background: #E6E9ED;
            border-radius: 8px 8px 0px 0px;
            border: 1px solid #E6E9ED;

            .el-dialog__title {
                font-size: 18px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 600;
                color: #333333;
                line-height: 16px;
            }

            .el-dialog__headerbtn {
                top: 15px;
                right: 15px;
            }
        }

        .el-dialog__body {
            padding: 16px 20px 20px 20px;

            .upload-title {
                width: 140px;
                height: 22px;
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #333333;
                line-height: 22px;
                margin-bottom: 17px;

            }

        }

        .el-dialog__footer {
            padding-top: 0;

            .dialog-footer {
                .el-button {
                    padding: 10px 18px;
                }
            }
        }
    }
}

.el-input {
    width: 460px;
}
</style>
